<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表详情</title>
		<link rel="stylesheet" type="text/css" href="../css/列表详情.css"/>
				
		<style type="text/css">
#search span{width: 24px;height: 24px;background:url(../img/shop/vivo-head-ico.png) -85px 0 no-repeat;position: absolute;top: 28px;right: 19%;}
        #search form #btn:hover{background:#d10048;}
        .right p span{display: inline-block;width: 25px;height: 25px;line-height: 25px;text-align: center;border: 1px solid #CCCCCC;cursor: pointer;}
        .right button{
        	margin-top: 10px;
        	width: 100px;
		    height: 24px;
		    line-height: 24px;
		    text-align: center;
		    box-sizing: content-box;
		    border: none;
		    border-radius: 5px;
		    font-size: 16px;
		    background: #d20049;
		    color: #fff;
		    padding: 5px 20px;
		    margin-bottom: 10px;}
	    .nn{color: black;}
		</style>
	</head>
	<body>
<!--左边-->
		<div id="left">
			<ul>
				<li><a href="main.html"> 首  页 </a></li>
				<li class="li2">
					<a href="#">品牌系列</a>
					<div class="nav2" style="overflow: hidden; display: block;">
                        <ol>
                        	<li ></li>
                        	<li ><a>维您</a></li>
                        	<li><a href="商品展示.html">LA CELLER</a></li>
                        	<li><a>秘密花园</a></li>
                        	<li><a>SONOKO</a></li>
                        </ol>
                    </div>
				</li>
				<li><a href="#">美容护肤</a></li>
				<li><a href="#">健康养生</a></li>
				<li><a href="#">家居日用</a></li>
				<li><a href="#">积分换购</a></li>
				<li><a href="#" style="line-height: 23px;">VIP<br />会员专区</a></li>
				<li><a href="#" style="line-height: 23px;">关于<br />麦考林</a></li>
				<li><a href="#">企业荣誉</a></li>
			</ul>
		</div>
		
		<!--右边-->
		<div id="right">
			<ul>
				<li><a href=""><img src="../img/right1.png"></a></li>
				<li class="li2">
					<a href=""><img src="../img/right2.png"></a>
					<div class="nav2"><img src="../img/right3.png"></div>											
				</li>
				<li><a href=""><img src="../img/right4.jpg"></a></li>
				<li class="scroll"><img src="../img/shop/rightSider_04.png"></li>
			</ul>
		</div> 
		
		<div id="search">
			<form action="" method="post">
				<input type="text" placeholder="热门搜索：洁面  控油  祛痘" id="text"/>
				<input type="button" value="搜索" id="btn"/>				
			</form>
			<span></span>
			<ul></ul>
		</div>
		
		<div id="mainContent">
			<!--main-top-->
			<div class="com-header clearfix">
	            <h1 class="c1 fl"><a href="/"><img src="../img/logo.png" alt="麦考林"></a></h1>
	            <div class="c2 fr ">
	             <a href="javascript:void(0)" role="button" class="search-btn" style=""></a>
	             <span class="user_info_ajax">
	 				| <a href="login.html">登录</a>
	                | <a href="register.html">注册</a>                  
	                | <a href="/user.php">我的账户</a>
	                | <a href="购物车.html" class="headerCar">
	                    <em></em>
	                    <i class="num">0</i>
	                </a>
	                <span><img src="../img/tel-call.png" alt="400-110-1508"></span></span>
	            </div>
	        </div>
	        
	        
	        <div class="a1">
	        	<div class="left">	        		
        			<div id="box">
					    <div id="middleImg">
					        <img src="" class="small"/>
					        <div id="middleArea"></div>
						</div>
					    <div id="small">
					        <ul>
					            <li><img src=""/ class="small"></li>
					            <li><img src="" class="lia"/></li>						            
					        </ul>
					    </div>
					    <div id="bigArea">
					        <img id="bigImg" src="" class="lib"/>
					    </div>
					</div>	        		       		
	        	</div>

	        	<div class="right">	        		
	        		<h1></h1>
	        		<div class="clearfix">
                        <p class="fl"></p>
                        <p class="fr"></p>                            
	        		</div>
	        		<p class="price"></p>                       	        		        
                    <!--<div id="img"><img src="../img/shop/gmrx.gif"></div>   -->
                    <p>数量：<span class="down">-</span><span class="nn">1</span><span class="up">+</span></p>
                    <button class="btn">加入购物车</button>
                    <div id="logo">
                    	<a></a>
                    	<a></a>
                    	<a></a>
                    	<a></a>
                    	<a></a>
                    	<a></a>
                    </div>
	        	</div>
	        </div>
	    	
	    	<div id="content">
	    		<div class="left">
	    			<ul class="top">
	    				<li>商品信息</li>
	    				<li>商品评论</li>
	    				<li>商品问答</li>
	    			</ul>
	    			<div id="bd" style="font-size: 0;"></div>
	    			<table>
	    				<tr><td>【名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称】：LA CELLER胶原蛋白精华线球超值分享装</td></tr>
	    				<tr><td>【品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌】：LA CELLER</td></tr>
	    				<tr><td>【净&nbsp;&nbsp;含&nbsp;&nbsp;量】：8mg/粒x90粒/盒</td></tr><tr><td>【原产地内容物】：日本</td></tr>
	    				<tr><td>【保&nbsp;&nbsp;质&nbsp;&nbsp;期】：三年</td></tr>
	    				<tr><td>【成&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分】：可溶性胶原</td></tr>
	    				<tr><td>【使用方法】：洁面后，将一粒线球放在干燥的手心里或在产品的容器内，加入适量的水或者稀薄质地的化妆水，用手指糅合蛋白球做圆周运动，使其溶解成胶原蛋白精华液。然后涂抹于整个面部按摩吸收。如果有多余的精华液，可涂抹于脖子及身体。</td></tr>
	    				<tr><td>【储存方法】：请将本产品置于常温条件下保存，避免阳光直射。</td>  </tr>
	    				<tr><td>【注意事项】：请勿剧烈摇晃或碰撞本品。开盖后请立即使用完毕。开盖后，如长期接触空气或接受紫外线照射可能会引起产品品质下降。不要让婴幼儿接触此产品, 避免口服。请将本产品置于常温条件下保存，避免阳光直射。</td></tr>
	    			</table>	
	    			<div class="pinjia">
	    				<h2>商品评论</h2>
	    				<p>暂无评论</p>
	    			</div>
	    			<div class="wenda">
	    				<h2>商品问答</h2>
	    				<div class="b2">
                            <ul>                                                                                                        								<li>
                                    <div class="question clearfix">
                                        <em>135**** ：</em>
                                        <p>这款是几粒包装？每次用一粒？</p>
                                    </div>
                                    <div class="answer clearfix">
                                        <em>客服回答：</em>
                                        <p>您好，这是90粒装的，每次用一粒。</p>
                                    </div>                                     
                                </li>
                               	<li>
                                    <div class="question clearfix">
                                        <em>130**** ：</em>
                                        <p>你好，这个是正品吗？</p>
                                    </div>
                                    <div class="answer clearfix">
                                        <em>客服回答：</em>
                                        <p>您好，是正品哦。</p>
                                    </div>                                     
                                </li>
                                <li>
                                    <div class="question clearfix">
                                        <em>138**** ：</em>
                                        <p>你好，晚上用了这款其他护肤原来的晚上依然用吗？早上是否也可以用原来的</p>
                                    </div>
                                    <div class="answer clearfix">
                                        <em>客服回答：</em>
                                        <p>您好，其他的护肤品可以用的哦。</p>
                                    </div>                                     
                                </li>                                                                 
                            </ul>
                            
                            <form action="javascript:;" method="post" name="messageForm" class="quiz">
                                <h4>我要提问</h4>
                                <div class="comment">
                                    <textarea id="Textarea" placeholder="请输入您的评论内容！"  rows="5" cols="5" ></textarea>
                                    <span>字数限制为5-200个</span>
                                    <a href="javascript:void(0);" class="comment-btn">提交</a>                                    
                                </div>
                            </form>
                            
                        </div>
	    			</div>
	    		</div>
	    		<div class="right">
	    			<h2>相关产品</h2>
	    		</div>
	    	</div>
		
		</div>    
	    <footer>
			<ul id="foot-top">
				<li>
					<a>	
						<em></em>
						<span id="">100%正品保证</span>															
					</a>
				</li>
				<li>
					<a>
						<em style="background-position: 0 -106px"></em>
						<span id="">专业在线客服</span>															
					</a>
				</li>
				<li>
					<a>
						<em  style="background-position: 0 -212px"></em>
						<span id="">满99元包邮</span>															
					</a>
				</li>
			</ul>
			<div class="fr">
	            <dl>
	                <dt>新手指南</dt>               
	                <dd><a href="#" target="_blank" title="新会员注册">新会员注册</a></dd>
	                <dd><a href="#" target="_blank" title="购物演示">购物演示</a></dd>
	                <dd><a href="#" target="_blank" title="常见问题">常见问题</a></dd>
	            </dl>
	            <dl>
	                <dt>付款方式</dt>
	                <dd><a href="#" target="_blank" title="银行卡支付">银行卡支付</a></dd>
	                <dd><a href="#" target="_blank" title="支付宝支付">支付宝支付</a></dd>
	                <dd><a href="#" target="_blank" title="余额支付">余额支付</a></dd>
	            </dl>
	            <dl>
	                <dt>售后服务</dt>
	                <dd><a href="#" target="_blank" title="退换货政策">退换货政策</a></dd>
	                <dd><a href="#" target="_blank" title="退换货流程">退换货流程</a></dd>
	                <dd><a href="#" target="_blank" title="退款流程">退款流程</a></dd>
	                <dd><a href="#" target="_blank" title="发票说明">发票说明</a></dd>
	            </dl>
	            <dl>
	                <dt>特色服务</dt>
	                <dd><a href="#" target="_blank" title="贵宾专区">贵宾专区</a></dd>
	                <!--<dd><a href="/book/" target="_blank" title="电子刊物">电子刊物</a></dd>-->
	                <dd><a style="cursor:pointer;"  title="在线客服">在线客服</a></dd>
	            </dl>
	             <dl>
	                <dt>麦考林生活家</dt>
	                <dd><img src="../img/dingyue.jpg" alt="麦考林生活家" width="100" height="100"></dd>
	            </dl>
	             <dl class="last">
	                <dt>麦考林服务号</dt>
	                <dd style="margin-left:8px"><img src="../img/fuwu.jpg" alt="麦考林服务号" width="100" height="100"></dd>
	            </dl>
    		</div>
			<div class="foot-b">
				<ul class="clearfix">
                    <li class="first"><a href="#" rel="nofollow">  关于麦考林</a> </li>
                    <li><a href="#" target="_blank" rel="nofollow">INVESTOR RELATIONS</a></li>
                    <li><a href="#" rel="nofollow">联系我们 </a></li>	                    
                    <li><a href="#" rel="nofollow">服务中心</a></li>
                    <li class="last"><a href="#" rel="nofollow">加入我们 </a></li>                    
            	</ul>
            	<p><a href="#" target="_blank"><img src="../img/newicon.png" alt="上海工商" width="26" height="28"></a> 沪ICP备05003606号Copyright©2011-2015 MecoxLane Inc. All Rights Reserved</p>
			</div>							
	</footer>
	<div class="foot-bottom">
		<a target="_blank" href="#"><img src="../img/xfwqNew.jpg"></a>　　
		<a target="_blank" href="#"><img src="../img/evaluate.jpg"></a>						　　
		<a target="_blank" href="#"><img src="../img/beian.png">沪公网安备 31010402000234号</a>											
	</div>
		
	</body>
</html>
<script src="../js/tronke.Cookie.js"></script>
<script src="../js/Ajax.js"></script>
<script src="../js/jquery-1.12.3.min.js"></script>
<script src="../js/商品列表.js"></script>


<script type="text/javascript">
		var id=window.location.search.split("?")[1].split("=")[1];
		console.log(id);
		
//		var date = new Date();
//	    date.setDate(date.getDate() + 7);	
//	    setCookie("No." +id,JSON.stringify(data), date);//保存到cookie中	
	    
		var data=JSON.parse(getCookieValueByKey("No."+id));
		console.log(data);
		var nn=data.num;	//该商品的数目	
		console.log(nn);
		$(".nn").html(nn);
		
		$(".up").on("click",function(){
			nn++;
			$(".nn").html(nn);		
		})
		
		$(".down").on("click",function(){			
			nn--;
			if(nn<=0){nn=0}
			$(".nn").html(nn);			
		})
		
		
		//加入购物车
		$(".btn").on("click",function(){			
			var cloneimg=$(".small").eq(0).clone();
	    	$("#middleImg").append(cloneimg);
	    	cloneimg.css({
	    		"position":"absolute",
	    		"left":$(".small").eq(0).offset().left,
	    		"top":$(".small").eq(0).offset().top
	    	});
	    	$(cloneimg).animate({
	    		"width":0,
	    		"height":0,
	    		"left":$(".num").offset().left-190,
	    		"top":$(".num").offset().top-80
	    	},1000,function(){
	    		$(this).remove()
	    	})
			data.num=Number($(".nn").html());
			var date = new Date();
	    	date.setDate(date.getDate() + 7);	
	    	setCookie("No." +id,JSON.stringify(data), date);//保存到cookie中	    		    		    	
		})
		
		
		//获取购物车里商品的总数目
		var arr=[];
		var num=0;
		for(var i=0;i<35;i++){
			arr.push(getCookieValueByKey("No."+i));			
			if(arr[i]){
				num+=JSON.parse(arr[i]).num;			
			}
		}
		$(".num").html(num)		
		
	$(function(){		
		
		$("#search").find("span").on("click",function(){
			$("#search").slideUp();
		})
		
		$(".search-btn").on("click",function(){
			$("#search").slideDown();
		})
		
	})		
</script>
